<!--
 * @Description: 插件新建，修改弹窗
 * @Author: 黄勇
 * @Date: 2020-03-09 15:36:26
 * @LastEditTime: 2020-04-10 11:31:25
 * @LastEditors: 黄勇
 -->
<template>
    <AppDialog
        :isShowDialog="true"
        width="550px"
        :title="isModify ? '修改服务' : '新建服务'"
        @confirm="savePlugin"
        @close="$emit('close')"
        class="clean-el-dialog__body"
    >
        <div class="product-detail">
            <div class="product-detail__content">
                <div
                    class="product-detail__left"
                    style="flex: 1; width: 100%;"
                >
                    <div class="product-detail__item">
                        <label class="product-detail__label">产品线:</label>
                        <el-input
                            v-model="productLine.value"
                            disabled
                            class="product-detail__input"
                        ></el-input>

                    </div>
                    <div
                        v-if="isModify"
                        class="product-detail__item"
                    >
                        <label class="product-detail__label">服务编码:</label>
                        <el-input
                            v-model="plugin.id"
                            disabled
                            class="product-detail__input"
                        ></el-input>
                    </div>

                    <div class="product-detail__item">
                        <label class="product-detail__label">服务类型:</label>
                        <el-select
                            v-model="plugin.cag1Val"
                            placeholder="请选择服务类型"
                            class="product-detail__input"
                        >
                            <el-option
                                v-for="item in cag1Options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            >
                            </el-option>
                        </el-select>

                    </div>

                    <div class="product-detail__item">
                        <label class="product-detail__label">服务名称:</label>
                        <el-input
                            v-model="plugin.serviceName"
                            placeholder="请输入服务名称"
                            class="product-detail__input"
                        ></el-input>
                    </div>
                    <div class="product-detail__item">
                        <label class="product-detail__label">服务代码:</label>
                        <el-input
                            v-model="plugin.serviceCode"
                            placeholder="请输入服务代码"
                            class="product-detail__input"
                        ></el-input>
                    </div>

                    <div class="product-detail__item">
                        <label class="product-detail__label">配置使用:</label>
                        <el-radio
                            v-model="plugin.needConfig"
                            label="1"
                        >是</el-radio>
                        <el-radio
                            v-model="plugin.needConfig"
                            label="0"
                        >否</el-radio>
                    </div>
                    <div class="product-detail__item">
                        <label class="product-detail__label">服务备注信息:</label>
                        <el-input
                            v-model="plugin.description"
                            type="textarea"
                            placeholder="请输入服务备注信息,最多1000字"
                            maxlength="1000"
                            show-word-limit
                            class="product-detail__input"
                            style="height: auto;min-height: 40px;"
                        ></el-input>
                    </div>
                </div>
            </div>
        </div>
    </AppDialog>
</template>

<script>
import AppDialog from "@/components/AppCommon/AppDialog";
import Vue from "vue";
import { deepCopy } from "@/utils/tool";
export default {
    name: "plugin-modify",
    components: {
        AppDialog
    },
    props: {
        pluginData: {
            type: Object
        }
    },
    computed: {},
    data: () => ({
        isModify: false,
        productLine: {},
        categoryData: [],
        cag1Options: [], // 一级分类下拉
        // cag2Options: [], // 二级分类下拉
        plugin: {
            cag1Val: "",
            // cag2Val: "",
            serviceName: "",
            serviceCode: "",
            needConfig: "0",
            description: ""
        }
    }),
    created() {
        this.getProductLine();
        this.getCategoryType();
        if (this.pluginData) {
            this.isModify = true;
            let { productBasicInfo, productLineName } = this.pluginData;

            this.productLine.value = productLineName;
            // 回填数据
            this.plugin = {
                id: productBasicInfo.id,
                cag1Val: productBasicInfo.categoryId, //保留双向绑定
                serviceName: productBasicInfo.serviceName,
                serviceCode: productBasicInfo.serviceCode,
                needConfig: productBasicInfo.needConfig,
                description: productBasicInfo.description
            };
        }
    },
    mounted() {},
    watch: {},
    methods: {
        // 获取产品线列表
        getProductLine() {
            this.api
                .getProductLine(
                    {},
                    {
                        method: "get"
                    }
                )
                .then(res => {
                    this.productLine = res.data[0];
                })
                .catch(err => {});
        },
        // 获取服务分类列表
        getCategoryType() {
            this.api
                .getCategoryType(
                    {},
                    {
                        method: "get"
                    }
                )
                .then(res => {
                    let data = res.data || [];
                    this.categoryData = data;
                    this.plugin.cag1Val = this.plugin.cag1Val || data[0]["key"];
                    let handleData = data.map(item => {
                        return {
                            name: item.description,
                            value: item.key
                        };
                    });
                    this.staticType.initNewData("category1", handleData);
                    this.cag1Options = this.staticType.getStaticType(
                        "category1Type"
                    );
                })
                .catch(err => {});
        },
        // 保存插件
        savePlugin() {
            let { plugin, productLine } = this;

            //校验名称
            if (!plugin.serviceName) {
                this.$message({
                    showClose: true,
                    message: "请先输入服务名称",
                    type: "warning"
                });

                return;
            }
            //是否配置为True， 备注必填
            if (plugin.needConfig == 1 && !plugin.description) {
                this.$message({
                    showClose: true,
                    message: "请输入服务备注信息",
                    type: "warning"
                });
                return;
            }
            let postData = {
                productLineId: productLine.id,
                type: plugin.cag1Val,
                serviceName: plugin.serviceName,
                serviceCode: plugin.serviceCode,
                needConfig: plugin.needConfig,
                description: plugin.description
            };

            if (this.isModify) {
                postData.id = plugin.id;
                this.updatePlugin(postData);
            } else {
                this.addPlugin(postData);
            }
        },
        addPlugin(postData) {
            this.api
                .addPlugin(postData)
                .then(res => {
                    if (res.code == 200) {
                        this.$message({
                            showClose: true,
                            message: "新建成功",
                            type: "success"
                        });
                        this.$emit("confirm");
                    } else {
                        this.$message({
                            showClose: true,
                            message: "新建失败",
                            type: "error"
                        });
                    }
                })
                .catch(err => {
                    // if (err) {
                    //     this.$message({
                    //         showClose: true,
                    //         message: "新建失败",
                    //         type: "error"
                    //     });
                    // }
                });
        },
        updatePlugin(postData) {
            this.api
                .updatePlugin(postData)
                .then(res => {
                    if (res.code == 200) {
                        this.$message({
                            showClose: true,
                            message: "修改成功",
                            type: "success"
                        });
                        this.$emit("confirm");
                    } else {
                        this.$message({
                            showClose: true,
                            message: "新建失败",
                            type: "fail"
                        });
                    }
                })
                .catch(err => {
                    // this.$message({
                    //     showClose: true,
                    //     message: "新建失败",
                    //     type: "fail"
                    // });
                });
        }
    }
};
</script>

<style lang="scss" scoped src="../../../assets/styles/product/dialog.scss"></style>